<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-浅学音标'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="2"> </RouterTabs>
        <view class="content">
          <view class="title">
            {{ title }}
          </view>
          <view class="word">
            <scroll-view scroll-x="true">
              <view class="word_container">
                <view
                  class="word_content"
                  :class="{ active: pronunciationIndex === index }"
                  v-for="(item, index) in pronunciationList"
                  :key="index"
                  @click="changeLetter(item, index)"
                >
                  <text>{{ item }}</text>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="audio">
            <audioPlayer
              ref="audioPlayer"
              startPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_play.png"
              endPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_suspend.png"
              :audioId="pronunciationItem"
              :url="
                'http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/audio/spelling/' +
                pronunciationItem +
                '.m4a'
              "
            ></audioPlayer>
          </view>
          <view class="box">
            <view class="video">
              <video
                :src="$config.ossUrl + pronunciationItem + '.mp4'"
                controls
                object-fit="fill"
              ></video>
            </view>
            <view class="image">
              <swiper class="swiper" :autoplay="false" style="height: 450rpx">
                <swiper-item
                  v-for="(item, index) in watermarkList"
                  :key="index"
                >
                  <image :src="item" mode="aspectFill"></image>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  beforeRouteLeave(to, from, next) {
    this.$refs.audioPlayer.pause();
    next();
  },
  computed: {
    title() {
      if (this.type === "1") {
        return "26个英文字母常见发音";
      } else if (this.type === "2") {
        return "元音与辅音组合发音";
      } else if (this.type === "3") {
        return "元音和元音、半元音组合";
      } else if (this.type === "4") {
        return "辅音与辅音组合（1）";
      } else if (this.type === "5") {
        return "辅音与辅音组合（2）";
      }
    },
  },
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
      type: "",
      innerAudioContext: null,
      pronunciationList1: [
        "a",
        "e",
        "i",
        "o",
        "u",
        "y",
        "b",
        "c",
        "d",
        "f",
        "g",
        "h",
        "j",
        "k",
        "l",
        "m",
        "n",
        "p",
        "r",
        "s",
        "t",
        "v",
        "w",
        "x",
        "z",
      ],
      pronunciationList2: [
        "ab",
        "ack",
        "ad",
        "ag",
        "am",
        "amp",
        "an",
        "and",
        "ang",
        "ank",
        "ap",
        "ash",
        "at",
        "ed",
        "eg",
        "ell",
        "en",
        "end",
        "ent",
        "est",
        "et",
        "ick",
        "id",
        "ig",
        "ill",
        "im",
        "in",
        "ing",
        "ink",
        "ip",
        "it",
        "ob",
        "ock",
        "od",
        "og",
        "ong",
        "op",
        "ot",
        "ox",
        "ub",
        "uck",
        "ug",
        "um",
        "ump",
        "un",
        "ut",
      ],
      pronunciationList3: [
        "a_e",
        "ai",
        "air",
        "ar",
        "are",
        "aw",
        "ay",
        "e_e",
        "ea",
        "ear",
        "ee",
        "eer",
        "eigh",
        "er",
        "ere",
        "ew",
        "i_e",
        "ie",
        "igh",
        "ir",
        "o_e",
        "oa",
        "oar",
        "oi",
        "oo",
        "oor",
        "or",
        "ou",
        "ough",
        "our",
        "ow",
        "oy",
        "u_e",
        "ue",
        "ui",
        "ur",
      ],
      pronunciationList4: [
        "bl",
        "br",
        "cl",
        "cr",
        "dr",
        "dw",
        "fl",
        "fr",
        "gl",
        "gr",
        "pl",
        "pr",
        "sc",
        "scr",
        "shr",
        "sion",
        "sk",
        "sl",
        "sm",
        "sn",
        "sp",
        "spl",
        "spr",
        "squ",
        "st",
        "str",
        "sure",
        "sw",
        "thr",
        "tion",
        "tr",
        "ture",
        "tw",
      ],
      pronunciationList5: [
        "bb",
        "ce",
        "ch",
        "ch",
        "ck",
        "dd",
        "dge",
        "ed",
        "ff",
        "ge",
        "gg",
        "gh",
        "kn",
        "ll",
        "mb",
        "mm",
        "mn",
        "ng",
        "nn",
        "ph",
        "pp",
        "qu",
        "se",
        "sh",
        "ss",
        "tch",
        "th",
        "tt",
        "ve",
        "wh",
        "wr",
        "zz",
      ],
      pronunciationList: [],
      pronunciationIndex: 0,
      pronunciationItem: "a",
      imageObject1: {
        a: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/A-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/A-2.png",
        ],
        b: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/b-1.png",
        ],
        c: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/c-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/c-2.png",
        ],
        d: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/d-1.png",
        ],
        e: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/e-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/e-2.png",
        ],
        f: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/f-1.png",
        ],
        g: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/g-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/g-2.png",
        ],
        h: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/h-1.png",
        ],
        i: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/i-1.png",
        ],
        j: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/j-1.png",
        ],
        k: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/k-1.png",
        ],
        l: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/l-1.png",
        ],
        m: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/m-1.png",
        ],
        n: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/n-1.png",
        ],
        o: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/o-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/o-2.png",
        ],
        p: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/p-1.png",
        ],
        r: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/r-1.png",
        ],
        s: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/s-1.png",
        ],
        t: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/t-1.png",
        ],
        u: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/U-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/U-2.png",
        ],
        v: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/v-1.png",
        ],
        w: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/w-1.png",
        ],
        x: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/x-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/x-2.png",
        ],
        y: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/y-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/y-2.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/y-3.png",
        ],
        z: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/z-1.png",
        ],
      },
      imageObject2: {
        ab: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ab-1.png",
        ],
        ack: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ack-1.png",
        ],
        ad: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ad-1.png",
        ],
        ag: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ag-1.png",
        ],
        am: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/am-1.png",
        ],
        amp: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/amp-1.png",
        ],
        an: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/an-1.png",
        ],
        and: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/and-1.png",
        ],
        ang: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ang-1.png",
        ],
        ank: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ank-1.png",
        ],
        ap: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ap-1.png",
        ],
        ash: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ash-1.png",
        ],
        at: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/at-1.png",
        ],
        ed: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ed_1-1.png",
        ],
        eg: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/eg-1.png",
        ],
        ell: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ell-1.png",
        ],
        en: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/en-1.png",
        ],
        end: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/end-1.png",
        ],
        ent: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ent-1.png",
        ],
        est: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/est-1.png",
        ],
        et: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/et-1.png",
        ],
        ick: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ick-1.png",
        ],
        id: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/id-1.png",
        ],
        ig: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ig-1.png",
        ],
        ill: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ill-1.png",
        ],
        im: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/im-1.png",
        ],
        in: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/in-1.png",
        ],
        ing: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ing-1.png",
        ],
        ink: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ink-1.png",
        ],
        ip: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ip-1.png",
        ],
        it: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/it-1.png",
        ],
        ob: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ob-1.png",
        ],
        ock: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ock-1.png",
        ],
        od: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/od-1.png",
        ],
        og: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/og-1.png",
        ],
        ong: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ong-1.png",
        ],
        op: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/op-1.png",
        ],
        ot: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ot-1.png",
        ],
        ox: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ox-1.png",
        ],
        ub: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ub-1.png",
        ],
        uck: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/uck-1.png",
        ],
        ug: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ug-1.png",
        ],
        um: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/um-1.png",
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/um-2.png",
        ],
        ump: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ump-1.png",
        ],
        un: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/un-1.png",
        ],
        ut: [
          "http://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ut-1.png",
        ],
      },
      imageObject3: {
        a_e: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/a_e-1.png",
        ],
        ai: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ai-1.png",
        ],
        air: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/air-1.png",
        ],
        ar: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ar-1.png",
        ],
        are: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/are-1.png",
        ],
        aw: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/aw-1.png",
        ],
        ay: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ay-1.png",
        ],
        e_e: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/e_e-1.png",
        ],
        ea: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ea-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ea-2.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ea-3.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ea-4.png",
        ],
        ear: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ear-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ear-2.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ear-3.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ear-4.png",
        ],
        ee: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ee-1.png",
        ],
        eer: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/eer-1.png",
        ],
        eigh: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/eigh-1.png",
        ],
        er: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/er-1.png",
        ],
        ere: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ere-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ere-2.png",
        ],
        ew: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ew-1.png",
        ],
        i_e: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/i_e-1.png",
        ],
        ie: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ie-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ie-2.png",
        ],
        igh: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/igh-1.png",
        ],
        ir: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ir-1.png",
        ],
        o_e: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/o_e-1.png",
        ],
        oa: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oa-1.png",
        ],
        oar: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oar-1.png",
        ],
        oi: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oi-1.png",
        ],
        oo: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oo-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oo-2.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oo-3.png",
        ],
        oor: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oor-1.png",
        ],
        or: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/or-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/or-2.png",
        ],
        ou: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ou-1.png",
        ],
        ough: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ough-1.png",
        ],
        our: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/our-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/our-2.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/our-3.png",
        ],
        ow: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ow-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ow-2.png",
        ],
        oy: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/oy-1.png",
        ],
        u_e: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/u_e-1.png",
        ],
        ue: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ue-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ue-2.png",
        ],
        ui: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ui-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ui-2.png",
        ],
        ur: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ur-1.png",
        ],
      },
      imageObject4: {
        bl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/bl-1.png",
        ],
        br: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/br-1.png",
        ],
        cl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/cl-1.png",
        ],
        cr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/cr-1.png",
        ],
        dr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/dr-1.png",
        ],
        dw: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/dw-1.png",
        ],
        fl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/fl-1.png",
        ],
        fr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/fr-1.png",
        ],
        gl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/gl-1.png",
        ],
        gr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/gr-1.png",
        ],
        pl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/pl-1.png",
        ],
        pr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/pr-1.png",
        ],
        sc: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sc-1.png",
        ],
        scr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/scr-1.png",
        ],
        shr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/shr-1.png",
        ],
        sion: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sion-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sion-2.png",
        ],
        sk: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sk-1.png",
        ],
        sl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sl-1.png",
        ],
        sm: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sm-1.png",
        ],
        sn: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sn-1.png",
        ],
        sp: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sp-1.png",
        ],
        spl: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/spl-1.png",
        ],
        spr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/spr-1.png",
        ],
        squ: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/squ-1.png",
        ],
        st: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/st-1.png",
        ],
        str: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/str-1.png",
        ],
        sure: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sure-1.png",
        ],
        sw: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sw-1.png",
        ],
        thr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/thr-1.png",
        ],
        tion: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/tion-1.png",
        ],
        tr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/tr-1.png",
        ],
        ture: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ture-1.png",
        ],
        tw: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/tw-1.png",
        ],
      },
      imageObject5: {
        bb: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/bb-1.png",
        ],
        ce: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ce-1.png",
        ],
        ch_1: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ch_1-1.png",
        ],
        ch_2: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ch_2-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ch_2-2.png",
        ],
        ck: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ck-1.png",
        ],
        dd: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/dd-1.png",
        ],
        dge: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/dge-1.png",
        ],
        ed: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ed_2-1.png",
        ],
        ff: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ff-1.png",
        ],
        ge: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ge-1.png",
        ],
        gg: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/gg-1.png",
        ],
        gh: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/gh-1.png",
        ],
        kn: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/kn-1.png",
        ],
        ll: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ll-1.png",
        ],
        mb: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/mb-1.png",
        ],
        mm: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/mm-1.png",
        ],
        mn: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/mn-1.png",
        ],
        ng: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ng-1.png",
        ],
        nn: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/nn-1.png",
        ],
        ph: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ph-1.png",
        ],
        pp: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/pp-1.png",
        ],
        qu: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/qu-1.png",
        ],
        se: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/se-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/se-2.png",
        ],
        sh: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sh-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/sh-2.png",
        ],
        ss: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ss-1.png",
        ],
        tch: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/tch-1.png",
        ],
        th: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/th-1.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/th-2.png",
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/th-3.png",
        ],
        tt: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/tt-1.png",
        ],
        ve: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/ve-1.png",
        ],
        wh: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/wh-1.png",
        ],
        wr: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/wr-1.png",
        ],
        zz: [
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/images/spelling/zz-1.png",
        ],
      },
      imageObject: {},
      watermarkList: [],
    };
  },
  onLoad(option) {
    this.type = option.type;
    this.innerAudioContext = uni.createInnerAudioContext();
    this.init();
  },
  methods: {
    init() {
      if (this.type === "1") {
        this.pronunciationList = this.pronunciationList1;
        this.pronunciationItem = "a";
        this.imageObject = this.imageObject1;
      } else if (this.type === "2") {
        this.pronunciationList = this.pronunciationList2;
        this.pronunciationItem = "ab";
        this.imageObject = this.imageObject2;
      } else if (this.type === "3") {
        this.pronunciationList = this.pronunciationList3;
        this.pronunciationItem = "a_e";
        this.imageObject = this.imageObject3;
      } else if (this.type === "4") {
        this.pronunciationList = this.pronunciationList4;
        this.pronunciationItem = "bl";
        this.imageObject = this.imageObject4;
      } else if (this.type === "5") {
        this.pronunciationList = this.pronunciationList5;
        this.pronunciationItem = "bb";
        this.imageObject = this.imageObject5;
      }
      this.imageList = this.imageObject[this.pronunciationItem];
      this.getWatermark();
    },
    changeLetter(item, index) {
      this.pronunciationIndex = index;
      this.pronunciationItem = item;
      if (this.type === "1") {
        this.imageList = this.imageObject1[item];
      } else if (this.type === "2") {
        if (item === "ed") {
          this.pronunciationItem = "ed_1";
        }
        this.imageList = this.imageObject2[item];
      } else if (this.type === "3") {
        this.imageList = this.imageObject3[item];
      } else if (this.type === "4") {
        this.imageList = this.imageObject4[item];
      } else if (this.type === "5") {
        if (item === "ed") {
          this.pronunciationItem = "ed_2";
        }
        if (item === "ch") {
          if (index === 2) {
            this.pronunciationItem = "ch_1";
            item = "ch_1";
          } else if (index === 3) {
            this.pronunciationItem = "ch_2";
            item = "ch_2";
          }
        }
        this.imageList = this.imageObject5[item];
      }
      this.getWatermark();
    },
    getWatermark() {
      if (this.watermarkList.length > 0) {
        this.watermarkList = [];
      }
      this.imageList.forEach((element) => {
        this.watermarkList.push(element);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./spellingTrainingDetail";
</style>
